<template>
  <div class="main login_page">
    <!-- 左边模块 -->
    <div class="lp_left"></div>
    <!-- 右边模块 -->
    <div class="lp_right">
      <div class="lpr_bar">
        <p>Login</p>
        <el-form class="lprb_form" label-width="100px">
          <el-form-item class="lprbf_row" label="用户名" >
            <el-input auto-complete="off" v-model="loginForm.account" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item class="lprbf_row" label="密码" >
            <el-input type="password" auto-complete="off" v-model="loginForm.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item class="lprbf_row">
            <el-button @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import requestConfig from '@/utils/config'
import globalApi from '@/api/GlobalApi'
import useBasicStore from '@/store/basic'

const router = useRouter()
const basicStore = useBasicStore()
const { proxy }: any = getCurrentInstance()

let loginForm = ref({
  account: 'young',
  password: 'young0110'
})

const login = () => {
  let { account, password } = loginForm.value
  if (account && password) {
    globalApi.userApi.login({ account, password }).then((res: any) => {
      let { userDetails, token } = (res || {})
      localStorage.setItem(requestConfig.tokenAlias, token)
      basicStore.registerUser(userDetails)
      basicStore.initPermissionList({})
      router.push('/home')
    })
  } else {
    proxy.$MSG.warning('用户名或密码缺失！')
  }
}
onMounted(() => {
  // localStorage.clear()
  // sessionStorage.clear()
})
</script>

<style lang="less" scoped>
.login_page {
  display: flex;
  .lp_left {
    width: 54%;
    height: 100%;
  }
  .lp_right {
    width: 46%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .lpr_bar {
      width: 70%;
      min-width: 480px;
      max-width: 600px;
      height: auto;
      min-height: 360px;
      padding: 40px 20px;
      box-sizing: border-box;
      p {
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        padding: 0 40px;
        font-size: 20px;
      }
      .lprb_form {
        padding: 0 40px;
        .lprbf_row {
          margin: 30px auto;
          .el-input {
            width: 100%;
            input {
              border-radius: 0;
            }
          }
          .el-button {
            width: 100%;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
